<template lang="pug">
.main
  .bannerSection(:style="{backgroundImage:`url(${bg1})`}")
    .info
      .infoTitle 花瓣儿
      .subTitle 您身边的财税专家
  .section
    .title {{data.title}}
    .content(v-html="data.content")

</template>

<script>
export default {
  components: {},
  data() {
    return {
      bg1: require("@/assets/about/s-bg01.jpg"),
      data: {}
    };
  },
  computed: {},
  methods: {
    getData(id) {
      this.$API.get("/article/" + id).then(res => {
        this.data = res;
      });
    }
  },
  created() {},
  mounted() {
    if(this.$route.params.id){
      this.getData(this.$route.params.id)
    }
  }
};
</script>

<style lang="less" scoped>
@wid:800px;
.bannerSection {
  position: relative;
  height: 680px;
  background-position: center top;
  background-repeat: no-repeat;
  .info {
    .wrap;
    padding-top: 300px;
    .center;
    color: @white;
    .infoTitle {
      .size(80px);
      letter-spacing: 4px;
    }
    .subTitle {
      .size(30px);
      .lh(70px);
      letter-spacing: 6px;
    }
  }
}
.section {
  max-width: @wid;
  margin:1em auto;
  .title{
    font-weight: bold;
    .size(26px);
    .lh(100px);
  }
  .content{
    text-indent: 2em;
    .lh(35px);
    .left;
  }
}
</style>
